<template>
  <el-dialog
    style="height: 2.6362rem; padding-top: 30px"
    v-model="dialogFormVisible"
    :title="dialogtitle"
  >
    <el-form
      ref="form"
      :rules="rules"
      style="height: 1.406rem"
      :model="formdata"
    >
      <el-form-item label="分类名称" label-width="0.5858rem" prop="channelname">
        <el-input
          style="height: 0.2343rem"
          v-model="formdata.channelname"
          autocomplete="off"
          placeholder="请输入分类名称"
        />
      </el-form-item>
      <el-form-item
        label="分类别名"
        label-width="0.5858rem"
        prop="channelothername"
      >
        <el-input
          style="height: 0.2343rem"
          v-model="formdata.channelothername"
          autocomplete="off"
          placeholder="请输入分类别名"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button @click="request(gettableData)" type="primary"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { articleaddchannelservice } from '@/api/article.js'
import { articleemitchannelservice } from '@/api/article.js'
import { reactive, ref } from 'vue'

const form = ref()
const dialogtitle = ref('')
const dialogFormVisible = ref(false)
const rules = reactive({
  channelname: [
    { pattern: /^[^0-9]*$/, message: '不能为数字', trigger: 'blur' },
    { required: true, message: '不能为空', trigger: 'blur' },
    {
      min: 2,
      max: 10,
      message: '长度只能是2-10个字符',
      trigger: 'blur'
    }
  ],
  channelothername: [
    { pattern: /^[^0-9]*$/, message: '不能为数字', trigger: 'blur' },
    { required: true, message: '不能为空', trigger: 'blur' },
    {
      min: 2,
      max: 10,
      message: '长度只能是2-10个字符',
      trigger: 'blur'
    }
  ]
})
let formdata = reactive({
  channelname: '',
  channelothername: '',
  index: -1,
  isemit: false
})
const request = async (gettableData) => {
  if (formdata.isemit) {
    await form.value.validate()
    await articleemitchannelservice(formdata)
    gettableData()
    dialogFormVisible.value = false
  } else {
    await form.value.validate()
    await articleaddchannelservice(formdata)
    gettableData()
    dialogFormVisible.value = false
  }
}
defineProps({
  gettableData: {
    required: true
  }
})
defineExpose({
  open: async (row, $index) => {
    formdata = reactive({
      channelname: '',
      channelothername: '',
      index: -1,
      isemit: false
    })
    dialogtitle.value = row ? '编辑分类' : '添加分类'
    dialogFormVisible.value = true
    // 编辑分类的情况下
    if (row) {
      formdata.channelname = row.channelname
      formdata.channelothername = row.channelothername
      formdata.index = $index
      formdata.isemit = true
    }
  }
})
</script>

<style scoped lang="less">
.el-form-item:nth-child(1) {
  margin-top: 0.3515rem;
}
.el-form-item:nth-child(2) {
  margin-top: 0.2343rem;
}
</style>
